<template>
		  <page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
    <view class="list-item" v-for="item in props.list" :key="item.id" @click="navigationUrl(item)">
        <!-- 左侧：图标 + 主标题 -->
        <view class="item-left">
            <text class="iconfont" :class="item.icon"></text>
        </view>

        <!-- 中间：主标题 + 详情 -->
        <view class="item-content">
            <text class="item-title text13">{{ item.title }}</text>
            <text v-if="item.desc" class="item-desc text12">{{ item.desc }}</text>
        </view>
        <!-- 右侧箭头 -->
        <wd-icon custom-class="item-arrow" name="arrow-right" size="19px"></wd-icon>
    </view>
</template>
<script setup>

import { defineProps } from "vue"
import { useFontSizeStore } from '@/stores/fontSizeStore';
const fontSizeStore = useFontSizeStore();

import {
    useRouter
} from 'uni-mini-router'

// 路由实例 - 保留原逻辑
const router = useRouter();
// top="10" bottom="10"
const props = defineProps(['list'])

const navigationUrl = (item) => {
    router.push({
        name: item.pathName,
        params: {
            name: item.name,
            title:item.title
        }
    })
}
</script>

<style scoped lang="less">
@import '@/static/styles/colors.less';
@import '@/static/styles/constants.less';

@icon-color: #007aff; // 图标主题色
@text-color: #333; // 文字颜色
@item-height: 140rpx; // 增加高度以容纳详情
@border-color: #e5e5e5;



.list {
    padding: 0 30rpx;
}

.list-item {
    display: flex;
    align-items: center;
    height: @item-height;
    border-radius: @layout-border-radius-sm;
    padding: 0rpx 30rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border: 1rpx solid @color-border-dark;
    position: relative;

    &:active {
        transform: scale(0.98);
        opacity: 0.8;
    }

    .item-left {
        width: 60rpx;
        text-align: center;
        margin-right: 24rpx;

        .iconfont {
            font-size: @h1-size;
            color: @icon-color;
        }
    }

    .item-content {
        flex: 1;
        overflow: hidden;
    }

    .item-title {
        font-size: @h5-size;
        color: @color-text-dark;
        font-weight: 500;
        line-height: 1.4;
        display: block;
    }

    .item-desc {
        font-size: @h6-size;
        color: @color-text-secondary;
        line-height: 1.4;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 4rpx;
    }

    .item-arrow {
        // font-size: 36rpx;
        color: @color-text-placeholder;
        margin-left: auto;
        transform: rotate(0deg);
        transition: transform 0.3s;
    }
}
</style>